{% load static %}

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <!-- 引入核心的css文件 -->
    <link href="{% static "layui/css/layui.css" %}" rel="stylesheet" media="all">
    <!-- 引入核心的js文件-->
    <script src="{% static "layui/layui.js" %}"></script>
    <script src="{% static "js/jquery-3.6.0.min.js" %}"></script>

</head>

<body>


<!-- 数据表格开始 -->
<table class="layui-hide" id="noxrTable" lay-data="id:noxrTable" lay-filter="noxrTable"></table>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-primary layui-border-blue layui-btn-sm " lay-event="edit">编辑</a>


</script>
<!-- 数据表格结束 -->

{% csrf_token %}
<script type="text/javascript">
    layui.use(['form', 'layer', 'table', 'laytpl', 'laydate'], function () {
            var form = layui.form,
                layer = parent.layer === undefined ? layui.layer : top.layer,
                $ = layui.jquery,
                laytpl = layui.laytpl,
                table = layui.table,
                laydate = layui.laydate;

            //渲染数据表格
            table.render({
                elem: '#noxrTable'
                , url: "/selectdnoxrname/"
                , parseData: function (res) { //res 即为原始返回的数据
                    return {
                        "code": res.code,    //解析接口状态
                        "count": res.count,  //解析数据长度
                        "page": res.page,   //当前页
                        "limit": res.limit,  //当前页数据条数
                        "data": res.data,  //解析数据列表
                        "pages": res.pages
                    };
                }
                , response: {
                    statusCode: 200 //规定成功的状态码，默认：0
                }
                , toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
                , page: true
                , id: 'table'
                , defaultToolbar: ['filter']
                , title: '计划任务数据表'
                , height: 'full-200'
                , cols:
                    [
                        [
                            { type: 'checkbox', fixed: 'left'}
                            // id  为数据库中字段名
                            , {field: 'id', title: 'id', width: 100, fixed: 'left', align: 'center', sort: true}
                            , {field: 'colleague_name', title: '不参加渲染任务同事名单', width: 1200, align: 'center'}

                            , {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150, align: 'center'}
                        ]
                    ]

            });

            // 工具条事件  就是操作那一栏
            table.on('tool(noxrTable)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
                var data = obj.data; //获得当前行数据
                var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

                // console.log(data)
                if (layEvent === 'edit') { //编辑
                    //layer.alert('编辑行：<br>'+ JSON.stringify(data))
                    openUpdateUser(data, form);
                }
            });

            //打开修改页面
            // layer的弹出层打开之后，会回调一个success的方法，我们自定义这个方法，将我们要传递的数据渲染到子页面上.（实际上是在父页面上完成对子页面的数据渲染）
            function openUpdateUser(data, form) {
                var index = layui.layer.open({
                    title: "编辑不参加渲染任务同事名单",
                    type: 2,
                    content: "/upnoxrname/",
                    area: ["1200px", "200px"],
                    shade: 0.4,
                    maxmin: true,
                    success: function (layero, index) {
                        var body = layui.layer.getChildFrame('body', index);
                        if (data) {
                           // console.log(data)
                            body.find(".colleague_name").val(data.colleague_name);  //  计划名称

                            // 传输 用户的 id ，不能修改，使用input 的隐藏功能 type="hidden"
                            body.find(".noxrid").val(data.id);

                            layui.form.render();
                        }
                        setTimeout(function () {
                            layui.layer.tips('点击此处返回用户列表', '.layui-layer-setwin .layui-layer-close', {
                                tips: 3
                            });
                        }, 500)
                    }
                })
            }
        }
    );
</script>
</body>
</html>
 